<template>
  <div class="findPage">
    <the-header></the-header>
    <van-sticky>
      <div class="main-title">
        <div v-for="(item,index) in titles" :key="index"
          :class="{ active:index === titleIndex }"
          @click="titleClick(item,index)">
          <span>{{ item }}</span>
        </div>
      </div>

      <div class="main-tag">
        <ul v-if="titleName == '歌单'">
          <li v-for="(item,index) in MainTagList" :key="index"
            :class="{ active:index === currentIndex }"
            @click="itemClick(item,index)">
            {{ item.name }}
          </li>
        </ul>

        <!-- singer-tab -->
        <ul v-if="titleName == '歌手'" class="singer-tag">
          <li v-for="(item,index) in SingerTagList" 
            :key="index"
            @click="singerClick(item,index)">
            <span :class="{ on:index === singerIndex }">{{ item.name }}</span>
          </li>
        </ul>

        <!-- area-tab -->
        <ul v-if="titleName == '歌手'" class="singer-tag">
          <li v-for="(item,index) in SingerArea" :key="index"
            @click="areaClick(item,index)">
            <span :class="{ on:index === areaIndex }">{{ item.name }}</span>
          </li>
        </ul>
      </div>
    </van-sticky>

    <div class="content" v-if="titleName == '个性推荐'">
      <swiper :banners="banners"></swiper>
      <div class="icon-list">
        <div class="icon-info">
          <div
            v-for="(item,index) in Dragon" 
            :key="index"
            style="padding:10px;">
            <img :src="item.iconUrl" alt="" srcset="">
            <span>{{ item.name }}</span>
          </div>

          <!-- <div class="day-info">
            <span>{{ day }}</span>
          </div> -->
        </div>
      </div>

      <music-list :title="recommendTitle" :data="recommendSong"></music-list>
      <music-list :title="newSongTitle" :data="newSong"></music-list>
    </div>

    <div class="content" v-if="titleName == '歌单'">
      <music-list :data="playList" :titleFlag="false"></music-list>
      <music-list :title="relevantTitle" :data="relevantList"></music-list>
    </div>

    <div class="content" v-if="titleName == '排行榜'">
      <official-rank :title="officialTitle" :topList="officialList" :songlist="songlist"></official-rank>
      <music-list :title="GlobalTitle" :data="GlobalList"></music-list>
    </div>
    
    <div class="content" v-if="titleName == '歌手'">
      <div class="word-list">
        <ul>
          <li v-for="(item,index) in wordList" :key="index"
            @click="wordClick(item,index)">
            <span :class="{ wordon:index === wordIndex }">{{ item }}</span>
          </li>
        </ul>
      </div>

      <singer :data="singerList" :titleFlag="false"></singer>
    </div>
  </div>
</template>

<script>
  import TheHeader from '../../components/TheHeader/TheHeader.vue';
  import Swiper from '../../components/Swiper/swiper.vue'
  import TheIcon from '../../components/TheIcon/TheIcon.vue'
  import MusicList from '../../components/Music-List/music-list.vue'
  import officialRank from './cpns/official-rank.vue'
  import Singer from './cpns/singer.vue'

  import { getHomeDragon, getBanner,getRecommendList,getNewSong,getPlayList,getPlayListDetail,getRelevantList,getRankList,getRankDetail, getSingerList } from '../../api/Home'
  import { findIcon } from '../../assets/js/icon'


  export default {
    data() {
      return {
        banners:[],
        findIcon: [],
        recommendTitle:'推荐歌单',
        recommendSong:[],
        newSongTitle:'最新音乐',
        newSong:[],
        Dragon:[],
        titles:['个性推荐','歌单','排行榜','歌手'],
        titleIndex:0,
        titleName:'',
        MainTagList:[],
        currentIndex:0,
        playList:[],
        relevantTitle:'相关歌单',
        relevantList:[],
        officialTitle:'官方榜',
        officialList:[],
        songlist:[],
        GlobalTitle:'全球榜',
        GlobalList:[],
        SingerTagList:[
          {name: '全部',id: '-1'},
          {name: '男歌手',id: '1'},
          {name: '女歌手',id: '2'},
          {name: '乐队',id: '3'},
        ],
        SingerArea:[
          {name: '全部',id: '-1'},
          {name: '华语',id: '7'},
          {name: '欧美',id: '96'},
          {name: '日本',id: '8'},
          {name: '韩国',id: '16'},
          {name: '其他',id: '0'},
        ],
        singerIndex:0,
        areaIndex:0,
        wordList:['热门','A','B',"C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","X","Y","Z"],
        wordIndex:0,
        typeId:-1,
        areaId:-1,
        initialId:-1,
        limit:'100',
        singerList:[],
        day:'',
      }
    },
    

    components:{
      TheHeader,
      Swiper,
      TheIcon,
      MusicList,
      officialRank,
      Singer
    },

    created(){
      this._getHomeDragon();
      this._getBanner();
      this._getRecommendList();
      this._getNewSong();
      this._getPlayList();
      this._getRankList();
    },

    mounted(){
      this.findIcon = findIcon;      
      let cookie = this.$session.getItem('cookie');
      // console.log(cookie);
      if(!cookie){
        this.$router.push({path: '/login'});
      };
      this.titleName = '个性推荐'
      getPlayList().then((res) => {
          // console.log(res);
        this.MainTagList = res.tags;
        this._getPlayListDetail(this.MainTagList[0].id);
        this._getRelevantList(this.MainTagList[0].id)
      })

      var myDate = new Date();
      this.day = myDate.getDate();
      // console.log(day);
    },
    methods:{


      // 网络请求处理
      _getBanner(){
        getBanner().then((res) => {
          // console.log(res);
          this.banners = res.banners;
        }).catch((error) => {
          console.log(error);
        })
      },

      _getRecommendList(){
        getRecommendList().then((res) => {
          // console.log("推荐歌单==>",res.data.result);
          this.recommendSong = res.result;
        }).catch((error) => {
          console.log(error);
        })
      },

      _getNewSong(){
        getNewSong().then((res) => {
          // console.log("最新音乐==>",res.data.result);
          this.newSong = res.result;
        }).catch((error) => {
          console.log(error);
        })
      },

      _getHomeDragon(){
        getHomeDragon().then((res) => {
          // console.log(res);
          this.Dragon = res.data;
        })
      },

      _getPlayList(){
        getPlayList().then((res) => {
          this.MainTagList = res.tags;
        })
      },

      _getPlayListDetail(id){
        getPlayListDetail(id).then((res) => {
          // console.log(res);
          this.playList = res.songs;
        }).catch((error) => {

        })
      },

      _getRelevantList(id){
        getRelevantList(id).then((res) => {
          console.log(res);
          this.relevantList = res.playlists;
        })
      },

      _getRankList(){
        // http://localhost:3000/toplist
        getRankList().then((res) => {
          // console.log(res.list);
          let rankList = res.list.splice(0,4);
          rankList.forEach((element) => {
            getRankDetail(element.id).then((res) => {
              this.officialList.push(res.playlist);
            })
          })
          this.GlobalList = res.list;
          // console.log(this.officialList);
        })
      },

      _getSingerList(typeId,areaId,initialId,limit){
        getSingerList(typeId, areaId, initialId, limit).then((res) => {
          // console.log(res);
          this.singerList = res.artists;
          // console.log(this.singerList);
        })
      },

      titleClick(item,index){
        this.titleName = item;
        this.titleIndex = index;

        if(this.titleName == '歌手'){
          this._getSingerList(this.typeId, this.areaId, this.initialId, this.limit);
        }
      },

      itemClick(item,index){
        this.currentIndex = index;
        this._getPlayListDetail(item.id);
        this._getRelevantList(item.id);
      },

      singerClick(item,index){
        this.singerIndex = index;
        this.typeId = item.id
        let {typeId,areaId,initialId,limit} = this
        this._getSingerList(typeId,areaId,initialId,limit)
        // console.log(typeId,areaId,initialId,limit);
      },

      areaClick(item,index){
        this.areaIndex = index;
        this.areaId = item.id;
        let {typeId,areaId,initialId,limit} = this
        this._getSingerList(typeId,areaId,initialId,limit)
        // console.log(typeId,areaId,initialId,limit);
      },

      wordClick(item,index){
        // console.log(this);
        this.wordIndex = index;
        if(item == '热门'){
          this.initialId = -1;
        }else{
          this.initialId = item.toLowerCase();
        }
        let { typeId,areaId,initialId,limit } = this;
        this._getSingerList(typeId,areaId,initialId,limit);
      },
    }
  }
</script>

<style scoped>
.main-title{
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 65px;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  background: #fafafa;
  border-bottom: 1px solid #ccc;
}

.main-tag{
  overflow-x: auto;
  background: #fafafa;
}

.main-tag ul{
  display: flex;
  flex-wrap: nowrap;
  padding: 0 5px;
  border-bottom: 1px solid rgb(150, 150, 150);
}

.main-tag ul li{
  padding: 0 8px;
  line-height: 40px;
  white-space: nowrap;
  display: inline-block;
  /* border-bottom: 1px solid rgb(150, 150, 150); */
}

.singer-tag{
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.content{
  overflow-y: auto;
}

.icon-list {
  padding-top: 30px;
  overflow-x: auto;
}

.icon-info{
  display: flex;
  justify-content: space-between;
  text-align: center;
}

.icon-list img{
  width: 50px;
  height: 50px;
  background: red;
  border-radius: 100%;
}

.icon-list span{
  font-size: 13px;
  vertical-align: middle;
  width: 50px;
}

/* .day-info{
  position: absolute;
  left: 8%;
  top:46%;
} */

.word-list{
  padding-top: 15px;
  padding-bottom: 15px;
  position: fixed;
  right: 0;
  font-size: 12px;
  background: #fafafa;
  text-align: center;
}

.word-list li{
  padding: 1px;
}

.active{
  color: #fc6464;
}

.on{
  background: #fc6464;
  border-radius: 50px;
  color:#fff;
}

.wordon{
  background: #fc6464;
  border-radius: 50px;
  color:#fff;
}
</style>